<template>
  <view class="viewport">
    <view class="item" v-for="(item,index) in dataList" @click="itemClick(item)">
      <view class="left_container">
        <image class="sotre_img" src="../../static/inspection/icon_store.png" />
        <view class="store_name">{{item.userinfoCompname}}</view>
      </view>
      <image class="right_img" src="../../static/inspection/right_arrow.png"></image>
    </view>
    <!-- <nut-popup v-model:visible="visible" position="bottom" z-index="999">
      <view class="region-content">
        <view class="region-header">
          <text class="region-title">未完成的巡店
          </text>
          <nut-icon name="close" @click="visible = false" />
        </view>

        <view class="region-task-title">
          <image src="../../static/inspection/icon_task_item.png" />巡店任务
        </view>
        <scroll-view class="options" scroll-y>
          <view v-for="item in currentOptions" :key="item.code" class="option-item"
            :class="{ active: isSelected(item) }" @click="onSelect(item)">

            <view class="option-text"> {{ item.name }}</view>
            <image class="right_img" src="../../static/index/icon_right_black.png"></image>
          </view>
        </scroll-view>
        <button class="button_normal" @click="ceateTask">新建巡店</button>
      </view>
    </nut-popup> -->
  </view>

</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import { getStoreList } from '@/services/inspection'

  const currentOptions = ref([{ name: '任务111111', code: '' }])
  //是否展示底部弹窗
  const visible = ref(false)
  // 列表数据
  const dataList = ref([])
  // 当前页数
  const page = ref(1)
  // 总条数
  const total = ref(0)
  //当前选中的店面
  let currentStore : any = null

  onLoad(() => {
    getData(true)
  })

  //下拉刷新
  onPullDownRefresh(() => {
    getData(true)
  })
  //上拉加载
  onReachBottom(() => {
    console.log('onReachBottom')
    if (page.value > total.value) {
      uni.showToast({
        title: '已加载完全部',
        icon: 'none',
      })
      return
    }
    getData(false)
  })
  //获取列表数据
  const getData = (refresh : Boolean) => {
    if (refresh) {
      page.value = 1
    } else {
      page.value++
    }
    uni.showLoading({
      title: ''
    })
    getStoreList({ page: page.value, rows: 10 }).then((res : any) => {
      console.log(res.list)
      uni.hideLoading()
      if (refresh) {
        //刷新逻辑
        dataList.value = res?.list
      } else {
        res?.list.forEach((item : any) => {
          dataList.value.push(item)
        })
      }
      total.value = res?.pageTools.pageCount

    }).catch((e : any) => {
      console.log(e)
      uni.hideLoading()
    })
  }
  //门店点击事件
  const itemClick = (item : any) => {
    // visible.value = true
    // currentStore = item
    uni.navigateTo({
      url: `/pagesMember/inspection/store_inspection?data=${JSON.stringify({
        name: item.userinfoCompname,
        code: item.userinfoCode,
        dealerCode: item.userinfoChannelcode,
        dealerName: item.userinfoChannelname
      })}`
    })
  }
  //创建任务 选择模版
  // const ceateTask = () => {
  //   uni.navigateTo({
  //     url: `/pagesMember/inspection/templatetasks?data=${JSON.stringify({
  //       name: currentStore.userinfoCompname,
  //       code: currentStore.userinfoCode
  //       dealerCode: currentStore.userinfoChannelcode
  //       dealerName: currentStore.userinfoChannelname
  //     })}`
  //   })
  //   visible.value = false
  // }

  //跳转任务详情
  const onSelect = (item : any) => {
    console.log(item)
    uni.navigateTo({
      url: `/pagesMember/inspection/store_inspection?data=${JSON.stringify({
        name: item.userinfoCompname,
        code: item.userinfoCode,
        dealerCode: item.userinfoChannelcode,
        dealerName: item.userinfoChannelname
      })}`
    })
    visible.value = false
  }
  const isSelected = (item : any) => {

  }
</script>

<style lang="scss">
  page {
    background: linear-gradient(#ffffff, #F6F8FA);
    padding-top: 20rpx;
  }

  .viewport {
    height: 100vh
  }

  .item {
    background: rgba(179, 220, 246, 0.2);
    border-radius: 16rpx;
    padding: 24rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

  }

  .left_container {
    display: flex;
    align-items: center;
    flex-direction: row;
  }

  .right_img {
    width: 36rpx;
    height: 36rpx
  }

  .sotre_img {
    width: 84rpx;
    height: 84rpx;
  }

  .store_name {
    height: 84rpx;
    line-height: 84rpx;
    margin-left: 15rpx;
    font-size: 30rpx;

  }

  .button_normal {
    width: 85%;
    color: #54B9CC;
    font-size: 32rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 2rpx solid #54B9CC;
    margin-bottom: 30rpx;
  }

  .region-content {
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 30rpx;
  }

  .region-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    margin-bottom: 20rpx;
    font-size: 32rpx;
  }

  .region-task-title {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    flex-grow: 1;
    font-size: 30rpx;
    font-weight: bold;
  }

  .region-title {
    flex-grow: 1;
    font-weight: bold;
    text-align: center;
  }

  .options {
    height: 600rpx;
    padding: 20rpx 0;

    .option-item {
      padding: 25rpx 30rpx;
      font-size: 28rpx;
      display: flex;
      flex-direction: row;
      background: #FFFFFF;
      justify-content: space-around;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      border: 2rpx solid #eee;

      .option-text {
        flex-grow: 1;
      }

      &.active {
        color: #2979ff;
      }
    }
  }
</style>
